import React, { useEffect, useState } from "react";
import style from './index.css'
import { useHistory } from "react-router-dom";
//分页
import { Pagination, Cascader, Input } from 'antd';
import { getlivelist , setZhiboState } from '@/api'
//开关
import { Switch } from 'antd';


const options = [
  {
    value: '直播中',
    label: '直播中',
  },
  {
    value: '未直播',
    label: '未直播',
  },
];
function LiveListPage() {
  //搜索
  const handleSearch = (value) =>{
    getlivelist({ keyword: value.target.defaultValue}).then(res => {
      setlist(res.data.data)
    })
  }
  const onChanges = (state) =>{
    getlivelist({ status : state}).then(res => {
      setlist(res.data.data)
      console.log(res.data.data);
    })
  }
  const [list, setlist] = useState([]);
  useEffect(() => {

    livelist()
  }, [])
  const livelist = () => {
    getlivelist().then(res => {
      setlist(res.data.data)
    })
  };
  const handleSwitch=(item)=>{
    console.log(item);
      setZhiboState({status:item.status,id:item.id}).then(res=>{
        // console.log(res.data);
        getlivelist().then(res=>{
          setlist(res.data.data)
          console.log(res.data.data);
        })
      })
  }
  let history = useHistory();
  const handleDetail=(item)=>{
    if(item.status==="直播中"){
      history.push("/LiveDetails");
    }else{
      alert("回放")
    }
  }
  return <div className="pulic">
    <div className="screens">
      {/* 筛选直播状态 */}
      <span>
        直播状态：<Cascader options={options} onChange={onChanges} placeholder="请选择状态" />
      </span>
      {/* 搜索主播名称 */}
      <span>
        主播搜索：<Input placeholder="搜索主播名称" onPressEnter={handleSearch} />
      </span>
    </div>
    <p>全部直播</p>
    {/* 渲染数据 */}
    <div className="tip">
      {
        list.map((item, index) => {
          return <dl key={index}>
            <dt>
              <img src={item.img} alt="" />
            </dt>
            <dd>
              <span>{item.title}</span>
              <p className="middle">
                <span>{item.name}</span>
                <span>{item.createtime}</span>
              </p> 
              <div className="below">
              <span className={style.spanend} onClick={() => { handleDetail(item) }}>{item.status === "直播中" ? "进去直播" : "回放"}</span>
                <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked={item.status} onChange={() => handleSwitch(item)}/>
              </div>
            </dd>
          </dl>
        })
      }
    </div>
    <div className="pagingdiv">
      <Pagination defaultCurrent={6} className="paging" />
    </div>
  </div>
}

export default LiveListPage;
